<template>
  <div class="zong">
    <br />
    <br />
    <br />
    <!-- <div class="user-info"> -->
    <div class="background">
      <div style="margin-bottom: -8%; font-size: 34px; margin-left: 35%">
        <h1>个人中心</h1>
      </div>
      <img class="cat" src="../img/cat.png" alt="" />
      <div class="user-info">
        <el-form
          ref="submitForm"
          :model="submitForm"
          label-width="80px"
          size="mini"
          :rules="rules"
        >
          <!-- ---------------头像------------------ -->
          <div
            style="width: 60%; height: 28%; margin-left: 50%; margin-top: 5%"
          >
            <el-form-item label="" ref="uploadElement" prop="uimg">
              <el-input v-model="submitForm.uimg" v-if="false"></el-input>
              <el-upload
                class="avatar-uploader"
                action=""
                ref="upload"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :on-change="handleChange"
                :auto-upload="false"
                :data="submitForm"
                :limit="1"
              >
                <img
                  v-if="submitForm.uimg"
                  :src="submitForm.uimg"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </div>
          <div class="forml">
            <el-form-item label="用户名" prop="uname">
              <el-input
                style="width: 30%"
                v-model="submitForm.uname"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="uphone">
              <el-input
                style="width: 30%"
                v-model="submitForm.uphone"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="uemail">
              <el-input
                style="width: 30%"
                v-model="submitForm.uemail"
              ></el-input>
            </el-form-item>
            <el-form-item label="生日">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="公历"
                  v-model="submitForm.ubirthday"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 65%"
                ></el-date-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="性别">
              <el-radio-group
                style="margin-left: 0px"
                v-model="submitForm.ugender"
                size="medium"
              >
                <el-radio label="男"></el-radio>
                <el-radio style="margin-left: -10px" label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="button">
            <el-form-item size="medium" style="margin-left: 0px">
              <el-button plain type="warning" @click="formSubmit('submitForm')"
                >立即修改</el-button
              >
              <!-- <el-button @click="resetForm('submitForm')">重置</el-button> -->
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <!-- </div> -->
    <br />
    <div class="user-other">
      <el-collapse class="zhedie">
        <!-- -------收藏的房屋------------ -->
        <el-collapse-item>
          <template slot="title">
            <p
              style="
                font-size: 18px;
                font-weight: bold;
                color: gray;
                margin-left: 30px;
              "
            >
              我收藏的房屋🏠
            </p>
          </template>
          <!-- -------------------------如果没有收藏,显示👇------------------- -->
          <div
            v-if="favorite.length === 0 || favorite.length === undefined"
            style="text-align: center"
          >
            <p style="font-size: 16px; color: gray">您还没有收藏过房子呢~</p>
          </div>
          <div v-else>
            <!-- -------------卡片---------------- -->
            <el-card class="card1" v-for="item in favorite" :key="item">
              <img
                class="collection"
                :src="item.img"
                :alt="item.house.htitle"
              />
              <div
                style="
                  float: right;
                  margin-right: 15%;
                  width: 230px;
                  height: 100px;
                  margin-top: -10px;
                "
              >
                <p style="font-size: 16px; font-weight: bold">
                  {{ item.house.htitle }}
                </p>
                <p
                  style="
                    margin-right: 10%;
                    font-size: 13px;
                    color: gray;
                    margin-top: -10px;
                  "
                >
                  {{ item.house.hestate }}
                </p>
              </div>
              <p
                style="
                  font-weight: bold;
                  float: right;
                  margin-right: 62%;
                  color: red;
                  margin-top: -10%;
                "
              >
                {{ item.house.hprice }}/月
              </p>
              <div style="float: right; margin-left: 70%; margin-top: -12%">
                <el-button @click="cancelFavorite(item)"> 取消收藏 </el-button>
              </div>
              <!-- <div style="float:right;margin-left:70%;margin-top:-10%">
                  <el-button>
                    收藏
                  </el-button>
              </div> -->
            </el-card>
          </div>
          <br />
        </el-collapse-item>
        <!-- ------------------我的合租-------------- -->
        <el-collapse-item>
          <template slot="title">
            <p
              style="
                font-size: 18px;
                font-weight: bold;
                color: gray;
                margin-left: 30px;
              "
            >
              我的合租👨
            </p>
          </template>
          <!-- -------------------------如果没有租房,显示👇------------------- -->
          <div
            v-if="share.length === 0 || share.length === undefined"
            style="text-align: center"
          >
            <p style="font-size: 16px; color: gray">您还没有相关合租信息~</p>
          </div>
          <div v-else>
            <!-- -------------卡片---------------- -->
            <el-card class="card1" v-for="item in share" :key="item">
              <img
                class="collection"
                :src="item.img"
                :alt="item.house.htitle"
              />
              <div
                style="
                  float: right;
                  margin-right: 15%;
                  width: 230px;
                  height: 100px;
                  margin-top: -10px;
                "
              >
                <p style="font-size: 16px; font-weight: bold">
                  {{ item.house.htitle }}
                </p>
                <p
                  style="
                    margin-right: 10%;
                    font-size: 13px;
                    color: gray;
                    margin-top: -10px;
                  "
                >
                  {{ item.house.hestate }}
                </p>
              </div>
              <p
                style="
                  font-weight: bold;
                  float: right;
                  margin-right: 62%;
                  color: red;
                  margin-top: -10%;
                "
              >
                {{ item.house.hprice }}/月
              </p>
              <div style="float: right; margin-left: 70%; margin-top: -12%">
                <el-button @click="toSingleHouse(item.house.hid)"> 查看 </el-button>
              </div>
            </el-card>
          </div>
          <br />
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            <p
              style="
                font-size: 18px;
                font-weight: bold;
                color: gray;
                margin-left: 30px;
              "
            >
              我发布的房源🏠
            </p>
          </template>
          <!-- -------------------------如果没有发布过,显示👇------------------- -->
          <div
            v-if="issue.length === 0 || issue.length === undefined"
            style="text-align: center"
          >
            <p style="font-size: 16px; color: gray">您还没有发布过出租信息~</p>
          </div>
          <!-- -------------------我发布的房源------------------- -->
          <div v-else>
            <!-- -------------卡片---------------- -->
            <el-card class="card1" v-for="item in issue" :key="item">
              <img
                class="collection"
                :src="item.img"
                :alt="item.house.htitle"
              />
              <div
                style="
                  float: right;
                  margin-right: 15%;
                  width: 230px;
                  height: 100px;
                  margin-top: -10px;
                "
              >
                <p style="font-size: 16px; font-weight: bold">
                  {{ item.house.htitile }}
                </p>
                <p
                  style="
                    margin-right: 10%;
                    font-size: 13px;
                    color: gray;
                    margin-top: -10px;
                  "
                >
                  {{ item.house.hestate }}
                </p>
                <!-- color: orangered -->
                <p style="margin-top: -10px">
                  发布时间:{{ item.house.hreleasedate }}
                  <el-tag
                    v-if="item.examine.state === 2"
                    size="mini"
                    style="margin-left: 20px;
                    margin-top:10px"
                    >审核中</el-tag
                  >
                  <el-tag
                    v-else-if="item.examine.state === 1"
                    size="mini"
                    type="success"
                    style="margin-left: 20px"
                    >审核成功</el-tag
                  >
                  <el-tag
                    v-else
                    size="mini"
                    type="danger"
                    style="margin-left: 20px"
                    >审核失败</el-tag
                  >
                </p>
              </div>
              <span
                style="
                  font-weight: bold;
                  float: right;
                  margin-right: 62%;
                  color: red;
                  margin-top: -10%;
                "
              >
                {{ item.house.hprice }}/月
              </span>
              <div style="float: right; margin-left: 70%; margin-top: -12%">
                <el-button @click="toSingleHouse(item.house.hid)"> 查看 </el-button>
              </div>
            </el-card>
            <br />
          </div>
        </el-collapse-item>
        <el-collapse-item>
          <template slot="title">
            <p
              style="
                font-size: 18px;
                font-weight: bold;
                color: gray;
                margin-left: 30px;
              "
            >
              我的举报👨‍✈️
            </p>
          </template>
          <!-- -------------------------如果没举报过,显示👇------------------- -->
          <div
            v-if="report.length === 0 || report.length === undefined"
            style="text-align: center"
          >
            <p style="font-size: 16px; color: gray">您还没有任何举报消息~</p>
          </div>
          <!-- ----------------举报的房屋---------------- -->
          <div v-else>
            <!-- -------------卡片---------------- -->
            <el-card class="card1" v-for="item in report" :key="item">
              <img
                class="collection"
                :src="item.img"
                :alt="item.house.htitle"
              />
              <div
                style="
                  float: right;
                  margin-right: 15%;
                  width: 230px;
                  height: 100px;
                  margin-top: -10px;
                "
              >
                <p style="font-size: 16px; font-weight: bold">
                  {{ item.house.htitle }}
                </p>
                <p
                  style="
                    margin-right: 10%;
                    font-size: 13px;
                    color: gray;
                    margin-top: -10px;
                  "
                >
                  {{ item.house.hestate }}
                </p>
              </div>
              <p
                style="
                  font-weight: bold;
                  float: right;
                  margin-right: 62%;
                  color: red;
                  margin-top: -10%;
                "
              >
                {{ item.house.hprice }}/月
              </p>
              <div style="float: right; margin-left: 70%; margin-top: -11%">
                <el-tag v-if="item.report.state === 2">举报审核中</el-tag>
                <el-tag v-else-if="item.report.state === 1" type="success"
                  >举报成功</el-tag
                >
                <el-tag v-else type="danger">举报失败</el-tag>
              </div>
            </el-card>
            <br />
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <br />
    <br />
    <el-footer style="background-color: #f5f5f6; display: flex">
      <div style="width: 20%; height: 90px; align-self: center">
        <p style="text-align: center; margin-top: 28px">
          <a
            style="
              color: #545c64;
              font-size: 26px;
              font-weight: bold;
              text-decoration: none;
            "
            href="#/"
            >泊寓</a
          >
        </p>
      </div>
      <div
        style="width: 50%; height: 90px; align-self: center; margin-left: 3%"
      >
        <p style="font-size: 13px; text-align: center; margin-top: 35px">
          <img src="../img/pl.png" style="width: 12px" /> 鲁公网安备
          31010402000253号 | 鲁ICP备17003747号
        </p>
      </div>
      <div
        style="width: 20%; height: 90px; align-self: center; margin-left: 3%"
      >
        <p style="font-size: 14px; text-align: center; margin-top: 35px">
          <i class="el-icon-phone-outline">010-6088-8888</i>
        </p>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { getHouseByUid } from "@/network/house";
import { collectionByUid } from "@/network/house";
import { shareByUid } from "@/network/house";
import { deleteFavorite } from "@/network/house";
import { reportByUid } from "@/network/house";
import { updateInfo } from "@/network/user";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        // if (!Number.isInteger(value)) {
        //   callback();
        // } else {
        if (value.length != 11) {
          callback(new Error("长度必须为11位,此时长度为" + value.length));
        }
      }, 1000);
      // var validatePass = (rule, value, callback) => {
      //   if (value === "") {
      //     callback(new Error("请输入密码"));
      //   }
      // };
    };
    return {
      favorite: [],
      share: [],
      issue: [], // 发布
      report: [],
      submitForm: {
        uid: "",
        uname: "",
        uphone: "",
        ubirthday: "",
        uemail: "",
        ugender: "",
        upwd: "",
        uimg: "",
      },
      param: {},
      rules: {
        uname: [
          { message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 4, message: "长度在2到5个字符", trigger: "blur" },
        ],
        // upwd: [{ validator: validatePass, trigger: "blur" }],
        uemail: [
          { message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        uphone: [
          { validator: checkPhone, trigger: "blur" },
          // {min:11,max:11,message:'长度必须为11位',trigger:'blur'},
        ],
        uimg: [{ message: "请上传图片", trigger: "blur" }],
      },
    };
  },
  created() {
    let user = this.$store.state.user;
    this.submitForm.uid = user.uid;
    this.submitForm.uname = user.uname;
    this.submitForm.uphone = user.uphone;
    this.submitForm.uemail = user.uemail;
    this.submitForm.ugender = user.ugender;
    this.submitForm.ubirthday = user.ubirthday;
    this.submitForm.uimg = user.uimg;
    this.submitForm.upwd = user.upwd;
    if (this.$store.state.user.uid === "") {
      this.$message.error("您没有权限访问本页面");
      this.$router.push("/");
    }
    console.log(this.$store.state.user.uid);
    let uid = this.$store.state.user.uid;
    // 发布的房子
    getHouseByUid(uid).then((res) => { 
      console.log("发布的房子"+res);
      this.issue = res;
    });
    // 收藏的房子
    collectionByUid(uid).then((res) => {
      console.log("collection", res);
      this.favorite = res;
    });
    // 参加的合租
    shareByUid(uid).then((res) => {
      console.log("share", res);
      this.share = res;
    });
    // 举报的房子
    reportByUid(uid).then((res) => {
      console.log("report", res);
      this.report = res;
    });
  },
  methods: {
    toSingleHouse(hid) {
      console.log(hid);
      this.$router.push("/singleHome/" + hid);
    },
    cancelFavorite(item) {
      console.log(item);
      deleteFavorite(item.cinfo.uid, item.cinfo.hid).then((res) => {
        if (res.status) {
          this.$message({
            message: "恭喜你，" + res.msg,
            type: "success",
          });
          collectionByUid(this.$store.state.user.uid).then((res) => {
            console.log("collection", res);
            this.favorite = res;
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    formSubmit(formName) {
      // this.param.append('user', this.submitForm);
      this.param.append("uid", this.submitForm.uid);
      this.param.append("uname", this.submitForm.uname);
      this.param.append("ugender", this.submitForm.ugender);
      this.param.append("uphone", this.submitForm.uphone);
      this.param.append("ubirthday", this.submitForm.ubirthday);
      this.param.append("uemail", this.submitForm.uemail);
      this.param.append("upwd", this.submitForm.upwd);
      this.param.append("uimg", this.submitForm.uimg);

      updateInfo(this.param).then((res) => {
        if (res.status) {
          this.$message({
            message: "恭喜你，" + res.msg,
            type: "success",
          });
          this.param.delete("uid");
          this.param.delete("uname");
          this.param.delete("upwd");
          this.param.delete("uphone");
          this.param.delete("ubirthday");
          this.param.delete("ugender");
          this.param.delete("uemail");
          this.param.delete("uimg");
          this.$store.dispatch("Login", this.params).then(() => {
            // this.$router.push({ path: "/" });
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleChange(file, fileList) {
      this.submitForm.uimg = URL.createObjectURL(file.raw);
      this.param = new FormData();
      this.param.append("file", file.raw, file.name);
    },
    beforeUpload(file) {
      return true;
    },
  },
};
</script>

<style>
.zong {
  /* background-color: #f7ec58b0 ; */
  width: 99%;
  height: auto;
}
.user-info {
  position: absolute;
  /* border: 1px solid black; */
  width: 62%;
  height: 60%;
  margin-left: 14%;
  z-index: 999;
  margin-top: -42%;
}
.user-other {
  margin-left: 10%;
  width: 71%;
  height: auto;
  border: 5px double rgb(238, 157, 91);
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.card1 {
  margin-top: 20px;
  margin-left: 20px;
  width: 90%;
  height: 120px;
}
.collection {
  width: 150px;
  height: 90px;
  margin-top: -5px;
}
.cat {
  /* margin-left: 8%; */
  width: 90%;
  height: 90%;
}
.background {
  position: relative;

  /* display: inline-block; */
  z-index: 1;
}
.forml {
  margin-top: -25%;
  margin-left: 5%;
}
.avatar-uploader-icon {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  line-height: 150px;
}
.button {
  margin-right: 19%;
  margin-top: -15%;
}
</style>